<template>
  <div>
    <svg width="1000" height="1500">
      <g />
      <rect />
    </svg>
    <div class="chartTooltip">
      <p id="chartTooltipText">
        <span class="chartTooltip-textMoney" />
      </p>
    </div>
  </div>
</template>

<script>
import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
export default {
  data() {
    return {
      isTipBoxShowed: false,
      list: {
        nodeInfos: [
          {
            id: 'node1',
            // label:
            //   '节点1我是超级无敌长的节点我是超级无敌长的节点我是超级无敌长的节点',
            labelType: 'html',
            label:
              '<p style="width: 200px; word-wrap: break-all; white-space: pre-line">节点1我是超级无敌长的节点我是超级无敌长的节点我是超级无敌长的节点</p>',
            width: 200,
            height: 50,
          },
          {
            id: 'node2',
            label: '节点2',
          },
          {
            id: 'node3',
            label: '节点3',
          },
          {
            id: 'node4',
            label: '节点4',
          },
          {
            id: 'node5',
            label: '节点5',
          },
          {
            id: 'node6',
            label: '节点6',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          // 节点指向自己
          {
            source: 'node2',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          // 往回指向
          {
            source: 'node3',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node4',
          },
          {
            source: 'node4',
            target: 'node5',
          },
          {
            source: 'node5',
            target: 'node6',
          },
          {
            source: 'node2',
            target: 'node6',
          },
          {
            source: 'node3',
            target: 'node4',
          },
          {
            source: 'node1',
            target: 'node4',
          },
          {
            source: 'node2',
            target: 'node6',
          },
        ],
      },
    }
  },
  mounted() {
    //获取D3
    var g = new dagreD3.graphlib.Graph().setGraph({})
    console.log(g)
    // 添加节点
    this.list.nodeInfos.forEach((item) => {
      item.rx = item.ry = 5 //圆角
      g.setNode(item.id, item)
    })
    // 链接关系
    this.list.edges.forEach((item) => {
      g.setEdge(item.source, item.target, {
        style: 'stroke: #0fb2cc; fill: none;',
        arrowheadStyle: 'fill: #0fb2cc;stroke: #0fb2cc;',
        arrowhead: 'undirected',
      })
    })
    g.nodes().forEach(function (v) {
      console.log('Node ' + v + ': ' + JSON.stringify(g.node(v)))
      console.log('xxxxxxxxxxxxx', g.node(v))
    })
    g.edges().forEach(function (e) {
      console.log(
        'Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))
      )
    })
    //绘制图形
    var svg = d3.select('svg'),
      inner = svg.select('g')
    //缩放
    var zoom = d3.zoom().on('zoom', function () {
      inner.attr('transform', d3.event.transform)
    })
    svg.call(zoom)
    var render = new dagreD3.render()
    // 在此处进行自定义节点形状和箭头类型

    render(inner, g)
    let code
    inner.selectAll('g.node').on('click', (e) => {
      //点击事件
      code = this.list.nodeInfos.filter((item) => {
        return item.id == e
      })
      console.log(code)

      if (!this.isTipBoxShowed) {
        if (this.timer) clearTimeout(this.timer)

        d3.select('.chartTooltip')
          .transition()
          .duration(300)
          .style('opacity', 1)
          .style('display', 'block')

        const yPosition = d3.event.layerY + 20
        const xPosition = d3.event.layerX + 20
        const chartTooltip = d3
          .select('.chartTooltip')
          .style('left', xPosition + 'px')
          .style('top', yPosition + 'px')

        chartTooltip
          .select('.chartTooltip-textMoney')
          .text('' + g.node(e).label)
        d3.select('.chartTooltip')
          .on('mouseover', () => {
            if (this.timer) clearTimeout(this.timer)

            d3.select('.chartTooltip')
              .transition()
              .duration(300)
              .style('opacity', 1)
              .style('display', 'block')
          })
          .on('mouseout', () => {
            this.timer = setTimeout(function () {
              d3.select('.chartTooltip')
                .transition()
                .duration(300)
                .style('opacity', 0)
                .style('display', 'none')
            }, 200)
          })
        this.isTipBoxShowed = true
      } else {
        this.timer = setTimeout(function () {
          d3.select('.chartTooltip')
            .transition()
            .duration(300)
            .style('opacity', 0)
            .style('display', 'none')
        }, 200)
        this.isTipBoxShowed = false
      }
    })
    var initialScale = 0.9
    svg.call(
      zoom.transform,
      d3.zoomIdentity
        .translate((svg.attr('width') - g.graph().width * initialScale) / 2, 20)
        .scale(initialScale)
    )
    svg.attr('height', g.graph().height * initialScale + 40)

    const nodeEnter = d3.select('svg').selectAll('g.node')

    nodeEnter
      .select('rect')
      // .on('mouseover', function (d) {
      //   if (this.timer) clearTimeout(this.timer)

      //   d3.select('.chartTooltip')
      //     .transition()
      //     .duration(300)
      //     .style('opacity', 1)
      //     .style('display', 'block')

      //   const yPosition = d3.event.layerY + 20
      //   const xPosition = d3.event.layerX + 20
      //   const chartTooltip = d3
      //     .select('.chartTooltip')
      //     .style('left', xPosition + 'px')
      //     .style('top', yPosition + 'px')

      //   chartTooltip.select('.chartTooltip-textMoney').text('地址：' + d)
      //   d3.select('.chartTooltip')
      //     .on('mouseover', () => {
      //       if (this.timer) clearTimeout(this.timer)

      //       d3.select('.chartTooltip')
      //         .transition()
      //         .duration(300)
      //         .style('opacity', 1)
      //         .style('display', 'block')
      //     })
      //     .on('mouseout', () => {
      //       this.timer = setTimeout(function () {
      //         d3.select('.chartTooltip')
      //           .transition()
      //           .duration(300)
      //           .style('opacity', 0)
      //           .style('display', 'none')
      //       }, 200)
      //     })
      // })
      .on('mouseout', () => {
        this.timer = setTimeout(function () {
          d3.select('.chartTooltip')
            .transition()
            .duration(300)
            .style('opacity', 0)
            .style('display', 'none')
        }, 200)
      })

    // nodeEnter.select('g.label').attr('transform', 'translate(50, 20)')
  },
}
</script>

<style lang="less">
svg {
  font-size: 14px;
}

.node rect {
  stroke: #606266;
  fill: #fff;
}

.node polygon {
  stroke: #606266;
  fill: #fff;
}

.edgePath path {
  stroke: #606266;
  fill: #333;
  stroke-width: 1.5px;
}
</style>
